<template>
  <div class="search">
    <xjhForm v-bind="SearchFromConfig" v-model="formData">
      <template #header>
        <h1 class="title">高级检索</h1>
      </template>
      <template #footer>
        <div class="handle-btn">
          <el-button :icon="RefreshRight" @click="handleResetClick"
            >重置</el-button
          >
          <el-button type="primary" :icon="Search" @click="handleQueryClick"
            >搜索</el-button
          >
        </div>
      </template>
    </xjhForm>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue';

import xjhForm from '@/base-ui/index';
import { Search, RefreshRight } from '@element-plus/icons-vue';

import type { IForm } from '@/base-ui';

const emit = defineEmits(['queryBtnClick', 'resetBtnClick']);

const props = defineProps({
  SearchFromConfig: {
    type: Object as () => IForm,
    required: true
  }
});

const formItems = props.SearchFromConfig.formItems ?? [];

// 根据我的配置文件动态决定我的form data
const formOriginData: any = {};
for (const item of formItems) {
  formOriginData[item.filed] = '';
}

/**
 * 从这里就可以看出 formOriginData 是不会被绑定的。。
 */
let formData = ref(formOriginData);

const handleResetClick = () => {
  // formData.value = formOriginData;
  for (const key in formOriginData) {
    /**
     * 这样的手法，确定有用。 我可以双向绑定里面的为什么不能绑定外面的。。
     */
    formData.value[`${key}`] = formOriginData[key];
  }
  emit('resetBtnClick');
};

const handleQueryClick = () => {
  emit('queryBtnClick', formData.value);
};
</script>

<style lang="less" scoped>
.title {
  text-align: center;
}
.handle-btn {
  padding-right: 30px;
  text-align: right;
}
</style>
